<template>
  <div class="menulist">
    <div class="sibarLeft">
      <el-button size="mini" @click="getMenuList">{{ $t('btn.reload') }}</el-button>
      <el-button
        type="primary"
        style="margin-bottom: 5px;"
        size="mini"
        :disabled="!bomCost('per:insertMenu')"
        @click.native="addTree"
      >
        {{ $t('market.treeAdd') }}<!--添加节点-->
      </el-button>
      <el-input v-model.trim="filterText" placeholder="输入关键字进行过滤" />
      <el-tree
        ref="tree"
        :data="treeData"
        :props="defaultProps"
        node-key="menuId"
        :default-expanded-keys="expandMenu"
        highlight-current
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        draggable
        @node-click="handleNodeClick"
        @node-drag-end="allowDrop"
      />
      <!-- 拖动   draggable
        @node-drag-end="allowDrop"    -->
    </div>
    <div class="table-content">
      <div style="margin-left: 40px;">
        <el-button type="primary" size="mini" @click="insetTree">
          {{ $t('btn.save') }}
        </el-button>
        <el-button type="danger" size="mini" @click="delMenu">{{ $t('shop.delete') }}</el-button>
      </div>
      <el-form label-width="100px" :model="menuData">
        <el-form-item :label="$t('market.menuName')" prop="menuName">
          <el-input v-model="menuData.menuName" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('market.url')">
          <el-input v-model="menuData.url" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('market.permission')">
          <el-input v-model="menuData.permission" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('shop.type')">
          <el-select v-model="menuData.masterType" size="mini">
            <el-option :label="$t('market.menu')" value="menu" />
            <el-option :label="$t('market.button')" value="button" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('market.isDisable')">
          <el-radio-group v-model="menuData.isDisable">
            <el-radio :label="0">{{ $t('market.yes') }}</el-radio>
            <el-radio :label="1">{{ $t('market.no') }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  queryTreeMenu,
  insertTreeMenu,
  updateTreeMenu,
  delTreeMenu
} from '@/api/basicManagement/menu'
export default {
  name: 'MenuList',
  data() {
    return {
      treeData: [
        {
          menuName: this.$t('market.menuTree'),
          masterType: 'menu',
          menuId: 0,
          childList: []
        }
      ],
      defaultProps: {
        children: 'childList',
        label: 'menuName'
      },
      filterText: '',
      menuData: {
        menuName: '',
        masterType: 'menu',
        url: '',
        permission: '',
        isDisable: 0
      },
      expandMenu: [0] // 展开节点们menuid
    }
  },
  watch: {
    // 过滤
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    // 菜单数据
    async getMenuList() {
      const { data: res } = await queryTreeMenu({})
      this.treeData[0].childList = res
      this.expandMenu = Array.from(new Set(this.expandMenu))
      // res.forEach((item) => {
      //   this.expandMenu.push(item.menuId)
      // })
    },
    // 拖动 (draggingNode:被拖拽节点,dropNode:结束拖拽时最后进入的节点 )
    async allowDrop(draggingNode, dropNode) {
      const {
        menuName,
        masterType,
        url,
        permission,
        isDisable
      } = draggingNode.data
      this.menuData = {
        menuName,
        masterType,
        url,
        permission,
        isDisable,
        parentId: dropNode.data.menuId
      }
      this.$confirm('确定要拖动该节点么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.insetTree()
        this.delMenu(draggingNode.data)
      })
    },
    // 新增
    insetTree() {
      const {
        menuName,
        masterType,
        url,
        permission,
        isDisable,
        parentId,
        menuId
      } = this.menuData
      const DATA = {
        name: menuName,
        masterType,
        url,
        permission,
        isdisable: isDisable,
        parentId
      }
      if (!menuId) {
        insertTreeMenu(DATA).then(res => {
          if (res.code === 0) {
            this.getMenuList()
            this.expandMenu = []
            this.expandMenu.push(parentId)
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      } else {
        this.upDataTree()
      }
    },
    // 修改
    upDataTree() {
      const {
        menuName,
        masterType,
        url,
        permission,
        isDisable,
        menuId
      } = this.menuData
      const DATA = {
        name: menuName,
        masterType,
        url,
        permission,
        isdisable: isDisable,
        fpkId: menuId
      }
      updateTreeMenu(DATA).then(res => {
        if (res.code === 0) {
          // this.getMenuList()
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success'
          })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 删除
    delMenu(ev) {
      this.$confirm('确认要删除么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        delTreeMenu({ fpkId: ev.menuId || this.menuData.menuId }).then(res => {
          if (res.code === 0) {
            this.getMenuList()
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    },
    // 过滤
    filterNode(value, data) {
      if (!value) return true
      return data.menuName.indexOf(value) !== -1
    },
    // 点击菜单
    handleNodeClick(data) {
      this.menuData = data
    },
    // 添加节点
    addTree() {
      const treeDa = this.menuData
      const bomData = {
        parentId: this.menuData.menuId, // 上级 menuId
        menuName: '新增',
        masterType: 'menu',
        url: '',
        permission: '',
        isDisable: 0,
        children: []
      }
      if (!treeDa.childList) {
        this.$set(treeDa, 'childList', [])
      }
      treeDa.childList.push(bomData)
    }
  }
}
</script>

<style scoped lang="scss">
.menulist {
  @include listBom;
  display: flex;
  flex-direction: row;
  height: calc(100vh - 100px);
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .sibarLeft {
    width: 20%;
    min-width: 200px;
    height: 100%;
    overflow: auto;
    padding-right: 20px;
    border-right: 1px solid #eee;
  }
  .table-content {
    width: 50%;
    margin-left: 10px;
  }
}
</style>
